<template>
	<div id="menu">
        <ul class="menu-list">
            <li class="menu-list-item" v-for = "item in menuList" :key="item.name" >
                <router-link :to="item.router">
					{{item.name}}
				</router-link>
            </li>
        </ul>
		<div class="login">
			<span @click="showLogin">登录</span>/<span @click="showRegister">注册</span>
		</div>
		<login-box :boxinfo="boxInfo" @hideloginbox="hideLoginBox"></login-box>
    </div>
</template>
<script type="text/javascript">
	import loginBox from './login.vue';
	export default {
		data() {
			return {
				boxInfo:{
					isShow:false,
					type:'login'
				},
				menuList: [
					{type:'all',name:'全部',router:{'name':'list',query:{tab:'all'}}},
					{type:'front',name:'前端',router:{'name':'list',query:{tab:'front'}}},
					{type:'end',name:'后端',router:{'name':'list',query:{tab:'end'}}}
				]
			}
		},
		mounted(){
			console.log(this.$route);
		},
		methods: {
			showLogin(){
				this.boxInfo.isShow = true;
				this.boxInfo.type = 'login';
			},
			showRegister(){
				this.boxInfo.isShow = true;
				this.boxInfo.type = 'register';
			},
			hideLoginBox(){
				this.boxInfo.isShow = false;
			}
		},
		components:{
			loginBox
		}
	}
</script>
<style lang="less">
	#menu{
		display:flex;
		justify-content: center;
		border-bottom: 1px solid #E1E2E6;
		position: relative;
	    .menu-list{
	    	display:flex;
	    	justify-content: space-between;
	    	li{
	    		padding: 0 0.4em;
	    		a{
	    			text-decoration: none;
	    			color: #737580;
	    			display: inline-block;
				    padding: 1.4em 0.4em;
				}
				a:hover{
					border-bottom: 1px solid #ddd;
				}
				a.router-link-exact-active {
					border-bottom: 1px solid #E63917;
				}
				:not(.router-link-exact-active){
					border-color: transparent;
				}
	    	}
	    	li:first-child{
	    		a{
	    			border-bottom: 1px solid #E63917;
	    		}
	    	}
		}
		.login{
			position: absolute;
			right: 1em;
			top: 1.45em;
			a{
			    color: #737580;
			    text-decoration: none;
			}
		}
	}
</style>